<template>
  <Modal v-model="modal" :title="title">
    <div class="tag-modal">
      <Form :model="form" ref="form">
        <p class="font-red">注意：同经销商被多个规则覆盖时会送多次</p>
        <Card>
          <p slot="title">附加规则</p>
          <Button size="small" type="primary" slot="extra" @click="onAddRule">添加一个规则</Button>
          <Card v-for="(item, index) in list" :key="index">
            <p slot="title">规则{{index+1}}</p>
            <Button size="small" type="primary" slot="extra" @click="onDelRule(item, index)">删除</Button>
            <Row>
              <Col span="24">
                <FormItem label="额外赠送云豆(个)">
                  <InputNumber :max="999999" :min="0" v-model="item.goldNum" @on-blur="onSaveGold(item, index)"></InputNumber>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="12"><span>规则覆盖的经销商</span></Col>
              <Col span="12" class="tr">
                <Button size="small" type="primary" @click="onAddDis(index)">添加经销商</Button>
              </Col>
            </Row>
            <template v-if="item.goldProductDistributorDTOList">
              <Row v-for="(j, i) in item.goldProductDistributorDTOList" :key="i">
                <Col span="12">
                  <span>{{j.distributorName}}</span>
                </Col>
                <Col span="2" offset="10">
                  <a href="#" @click="onDelete(index, i)">删除</a>
                </Col>
              </Row>
            </template>
          </Card>
        </Card>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">关闭</Button>
    </div>
    <Modal
        v-model="modal1"
        title="添加经销商"
        @on-ok="ok()"
        @on-cancel="cancel">
          <Select
            v-model="model1" 
            label-in-value
            filterable>
            <Option v-for="item in distributor" :value="item" :key="item.id">{{ item.name }}</Option>
        </Select>
    </Modal>
  </Modal>
</template>
<script>
export default {
  data() {
    return {
      modal1: false,
      model1: {},
      currentIndex: 0,
      distributor: [],
      modal: false,
      title: '经销商额外送豆',
      btnDisabled: false,
      id: '',
      form: {
        infoList: [{
          disList: [],
          goldNum: 0
        }]
      },
      list: [],
      status: 'pass'
    }
  },
  methods: {
    // 获取当前记录详情
    getData () {
      this.status = 'loading'
      this.$ajaxGet('/gold/rule/exceptional_info/' + this.id).then(data => {
        this.form.goldNum = data.goldNum
        this.list = (data || []).map(item => {
          return {
            id: item.id,
            goldNum: item.goldNum,
            goldProductDistributorDTOList: item.goldProductDistributorDTOList
          }
        })
        this.status = 'pass'
      }).catch(() => {
        this.status = 'error'
      })
    },
    // 获取所有经销商
    getDistributor () {
      this.$ajaxGet('/tiger/distributor/list').then(data => {
        this.distributor = (data || []).map(item => {
          return {
            id: item.distributorId,
            name: item.distributorName
          }
        })
      })
    },
    // 增加一个规则
    onAddRule (index) {
      if (this.list.length < 10) {
        this.currentIndex = index
        this.list.push({
          id: null,
          goldNum: null,
          goldProductDistributorDTOList: []
        })
      } else {
        this.$Notice.error({
          title: '最多10条规则'
        })
      }
    },
    // 删除当前规则
    onDelRule (item, index) {
      this.$Modal.confirm({
        title: '删除',
        content: '删除当前规则',
        onOk: () => {
          if (item.id) {
            this.$jsonPost(`/gold/rule/del_distributor_num/${item.id}`).then(data => {
              this.$Notice.success({
                title: '删除成功',
                desc: `<span class="font-red">当前规则</span> 已被删除。`
              })
            })
          }
          this.list.splice(index, 1)
        }
      })
    },
    //失去焦点添加云豆
    onSaveGold (item, index) {
      if (this.list[index].goldNum) {
        this.status = 'loading'
        let url = item.id ? 'gold/rule/edit_distributor_num' : '/gold/rule/save_distributor_num'
        let text = item.id ? '修改经销商额外送豆' : '新增经销商额外送豆'
        let param = {
          goldNum: this.list[index].goldNum,
          productRuleId: this.id
        }
        if (item.id) {
          param.id = item.id
        }
        this.$jsonPost(url, param).then(data => {
          this.$Notice.success({
            title: `${text}成功`
          })
          this.list[index].id = data
          this.status = 'pass'
        }).catch(() => {
          this.status = 'pass'
        })
      } else {
        this.$Notice.error({
          title: '先设置附加规则里的云豆数量'
        })
      }
    },
    openForm(item) {
      this.$refs.form.resetFields()
      this.item = ''
      this.id = ''
      this.item = item
      this.id = item.id
      this.btnDisabled = false
      this.getData()
      this.getDistributor()
      this.openModal()
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    onAddDis(index) {
      if (!this.list[index].goldNum) {
        this.$Notice.error({
          title: '先设置附加规则里的云豆数量'
        })
        return
      }
      this.currentIndex = index // 当前是哪个规则
      this.modal1 = true
      this.model1 = null
    },
    ok () {
      let url = 'gold/rule/save_distributor'
      let text = '新增经销商'
      let param = {
        distributorId: this.model1.id,
        goldDistributorNumId: this.list[this.currentIndex].id
      }
      this.status = 'loading'
      this.$jsonPost(url, param).then(data => {
        this.list[this.currentIndex].goldProductDistributorDTOList.push({
          distributorName: this.model1.name,
          distributorId: this.model1.id,
          id: data
        })
        this.$Notice.success({
          title: `${text}成功`
        })
        // this.closeModal()
        this.status = 'pass'
      }).catch(() => {
        this.status = 'pass'
      })
    },
    onDelete (index, i) {
      this.$Modal.confirm({
        title: '删除',
        content: '确定删除当前经销商？',
        onOk: () => {
          this.$jsonPost(`/gold/rule/del_distributor/${this.list[index].goldProductDistributorDTOList[i].id}`).then(data => {
            this.$Notice.success({
              title: '删除成功',
              desc: `<span class="font-red">当前经销商</span> 已被删除。`
            })
            this.list[index].goldProductDistributorDTOList.splice(i, 1)
          })
        }
      })
    }
  }
}
</script>
